/**
 * @description List5列表对应的装修5属性
 */
import React from 'react';
import { Collapse, Form, InputNumber, Radio } from 'antd';

import { FlagOptions } from '@/utils/Const';
import { getPropData } from './utils';

import StyleWrapper from '@/components/StylesWrapper';

function GoodAttr5({ blockKey, form, upateStyleEvent, onConfigEvent }) {

  // 属性的输入框变化时，触发 upateStyleEvent --> 更新style样式
  let handleStyleEvent = (paramKey) => {
    upateStyleEvent([blockKey, `${blockKey}_${paramKey}`])
  }

  return (
    <>
      <Form.Item
        label="个数"
        name={[blockKey, 'base', 'limit']}
      >
        <InputNumber
          min={1}
          precision={0}
          onChange={(value) => onConfigEvent([blockKey, 'base', 'limit'], value)}
        />
      </Form.Item>

      <Form.Item
        label="图标开关"
        name={[blockKey, 'base', 'iconFlag']}
      >
        <Radio.Group
          options={FlagOptions}
          onChange={(e) => onConfigEvent([blockKey, 'base', 'iconFlag'], e.target.value)}
          optionType="button"
          buttonStyle="solid"
        />
      </Form.Item>

      <Form.Item
        label="标签开关"
        name={[blockKey, 'base', 'labelFlag']}
      >
        <Radio.Group
          options={FlagOptions}
          onChange={(e) => onConfigEvent([blockKey, 'base', 'labelFlag'], e.target.value)}
          optionType="button"
          buttonStyle="solid"
        />
      </Form.Item>

      <Collapse accordion items={[
        {
          key: "box",
          label: "总盒子",
          children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_box', 'default')} onStyleChange={() => handleStyleEvent('list_box')} />
        },
        {
          key: "1",
          label: "元素1",
          children: <Collapse accordion items={[
            {
              key: "item",
              label: "盒子",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_item1', 'default')} onStyleChange={() => handleStyleEvent('list_item1')} />
            },
            {
              key: "item-hover",
              label: "盒子-悬浮",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_item1', 'hover')} onStyleChange={() => handleStyleEvent('list_item1')} />
            },
            {
              key: "img",
              label: "图片盒子",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_img1', 'default')} onStyleChange={() => handleStyleEvent('list_img1')} />
            },
            {
              key: "info",
              label: "信息盒子",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_info1', 'default')} onStyleChange={() => handleStyleEvent('list_info1')} />
            },
            {
              key: "name",
              label: "标题",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_name1', 'default')} onStyleChange={() => handleStyleEvent('list_name1')} />
            },
            {
              key: "price",
              label: "价格",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_price1', 'default')} onStyleChange={() => handleStyleEvent('list_price1')} />
            },
            {
              key: "desc",
              label: "描述",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_desc1', 'default')} onStyleChange={() => handleStyleEvent('list_desc1')} />
            },
            {
              key: "time",
              label: "时间",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_time1', 'default')} onStyleChange={() => handleStyleEvent('list_time1')} />
            },
          ]} />
        },
        {
          key: "2",
          label: "其它元素",
          children: <Collapse accordion items={[
            {
              key: "item",
              label: "盒子",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_items', 'default')} onStyleChange={() => handleStyleEvent('list_items')} />
            },
            {
              key: "item-hover",
              label: "盒子-悬浮",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_items', 'hover')} onStyleChange={() => handleStyleEvent('list_items')} />
            },
            {
              key: "img",
              label: "图片盒子",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_imgs', 'default')} onStyleChange={() => handleStyleEvent('list_imgs')} />
            },
            {
              key: "info",
              label: "信息盒子",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_infos', 'default')} onStyleChange={() => handleStyleEvent('list_infos')} />
            },
            {
              key: "name",
              label: "标题",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_names', 'default')} onStyleChange={() => handleStyleEvent('list_names')} />
            },
            {
              key: "price",
              label: "价格",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_prices', 'default')} onStyleChange={() => handleStyleEvent('list_prices')} />
            },
            {
              key: "desc",
              label: "描述",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_descs', 'default')} onStyleChange={() => handleStyleEvent('list_descs')} />
            },
            {
              key: "time",
              label: "时间",
              children: <StyleWrapper form={form}  {...getPropData(blockKey, 'list_times', 'default')} onStyleChange={() => handleStyleEvent('list_times')} />
            },
          ]} />
        },

      ]}
      />
    </>
  )
}



export default React.memo(GoodAttr5)